2008/03/12

Recent entries from same category

  1. xtag と angular1 を足して2で割った感じに使える薄い JavaScript ライブラリ「sj.js」
  2. Web Component を簡単に作れる JavaScript ライブラリ「X-Tag」
  3. twitter.bat
  4. jQueryプラグインとして動作するGithub Badge作ってみた。
  5. XSLとjQuery/HTMLだけで作る、amazon最速検索

id:miyagawa氏のはてなブックマークからyowlという物を見つけました。
yowl - Google Code
yowlとは、Mac OS X上で実装されている通知システムのアプリケーション実装「Growl」をYahooライブラリYUIを使ってWeb実装した物です。
さっそくダウンロードして使ってみましたが、やっぱりYUIは良く出来てますね。
Windows用にシステムトレイ常駐の通知アプリケーションと連携すれば、Webからデスクトップアプリケーションとして何かしらを通知出来るという事になります。
通知時のアクションが決められれば、夢の広がるアプリケーションになるでしょうね。
今日はサンプルとして、以前つくった「はてブでアーーーーッ!!!」をYOWLでやってみたいと思います。

少し色を付けて、JSDeferredとjQueryを使い、del.icio.usとパラレルで動かそうかと思いましたが、あまり面白くないのでやめて、結局JSDeferredのcall/waitのみ使わせて頂いています。

実行結果、ソースは以下から...
まず実行結果。
ブックマークを通知表示
はてなブックマークの際に付けたコメントが通知表示されます。
画面右上に出ます。

本当は、タイマー等でJSONやRSSを監視するのが本当の使い方なんでしょうけどね。
そしてソース。
結構いっぱいロードしてます。
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://svn.coderepos.org/share/lang/javascript/jsdeferred/trunk/jsdeferred.js"></script>
<script type="text/javascript" src="http://mattn.kaoriya.net/js/jquery-latest.js"></script>
<script type="text/javascript" src="http://mattn.kaoriya.net/yowl/yowl.js"></script>
<script type="text/javascript" src="http://mattn.kaoriya.net/yowl/display-yui.js"></script>
<style type="text/css">
@import url(http://mattn.kaoriya.net/yowl/yowl.css);
</style>
<script type="text/javascript"><!--
function yowlHatenaBookmark() {
    document.Yowl.register(
      "hatebu",
      ["HatenaBookmark"],
      [0],
      "http://mattn.kaoriya.net/images/hatena.gif"
    );

    var url = location.href;
    var n = url.indexOf('?');
    if (n > 0) url = url.substring(0, n);

    var hatebu_url = 'http://b.hatena.ne.jp/entry/json/'
        + '?url=' + encodeURIComponent(url)
        + '&callback=?';

    $.getJSON(hatebu_url, function(data) {
        var list = data['bookmarks'];
        Deferred.loop({end: list.length}, function(n, o) {
            var f = {};
            f.user = list[n]['user'];
            f.message = list[n]['comment'];
            f.image = 'http://www.hatena.ne.jp/users/' + f.user.substring(0,2) + '/' + f.user + '/profile_s.gif';
            return Deferred.call(document.Yowl.notify,
                "HatenaBookmark",
                "はてなブックマーク by " + f.user,
                f.message,
                "hatebu",
                f.image,
                false,
                0).wait(1);
        });
    });
}
--></script>

この「display-yui.js」の代わりに「display-systray.js」を使うと、システムトレイに通知される様になっています。
試したい方は上のURLから常駐アプリケーションをダウンロード/インストールして試してみて下さい。

Posted at by